<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>05实现三级下拉菜单</title>
</head>
<script src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
//        if($.browser.msie&& $.browser.version.substr(0,1)<7){}
        $("li").has("ul").mousemove(function(){
            $(this).children("ul").css("display","block");
        }).mouseout(function(){
            $(this).children("ul").css("display","none")
        })
    })
    animation
</script>
<style type="text/css">

    #nav{font-size:12px;font-weight:bold;list-style: none;overflow: auto;}
    #nav li{ float: left;margin-left: 1px;}
    #nav li a{line-height:20px;text-decoration: none;background-color:#ddd;text-align:center;display: block;color: #666;width: 80px;}
    #nav li ul{display: none;list-style: none;padding: 0;position: relative}
    #nav li ul li{margin-top: 2px;}
    /* #nav li:hover ul{display: block;width: 80px;}
     #nav li:hover ul li ul{display: none;}
     #nav li  ul li:hover ul {display: block;position: absolute;left:80px;top:0px}*/

    #nav li:hover ul{width: 80px;}
    #nav li  ul li:hover ul {position: absolute;left:80px;top:10px;margin-left: 2px}
</style>
<body>
<ul id="nav" >
    <li><a href="#">首页</a></li>
    <li>
        <a href="#">一级菜单</a>
        <ul>
            <li><a href="#">二级菜单</a>
                <ul>
                    <li><a href="#">三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
                    <li><a href="#">三级菜单</a></li>
                </ul>
            </li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li>
        <a href="#">一级菜单</a>
        <ul>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
            <li><a href="#">二级菜单</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
    <li><a href="#">一级菜单</a></li>
</ul>
</body>
</html>